<template>
  <highcharts :options="chartOptions"></highcharts>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { get_echarts } from "../api/ecgartsAPI";

const cookie = ref([]);
const chartOptions = ref({});

onMounted(async () => {
  if (!localStorage.getItem("czh1")) {
    const res = await get_echarts(
      "neighbourhood_availability",
      "NeighbourhoodAvailability",
      7
    );
    localStorage.setItem("czh1", JSON.stringify(res.data));
  }
  cookie.value = JSON.parse(localStorage.getItem("czh1"));
  const peoto = [
    "availability_30",
    "availability_60",
    "availability_90",
    "availability_365",
  ];
  const datax = cookie.value.map((item) => item.neighbourhood);
  let datay = [];
  peoto.forEach((item1) => {
    datay.push({
      name: item1,
      data: cookie.value.map((item2) => item2[item1]),
    });
  });

  chartOptions.value = {
    title: {
      text: "各地区房源未来可预定数量折线图",
    },
    xAxis: {
      categories: datax,
    },
    yAxis: {
      title: {
        text: "房源未来可预定数量",
      },
    },
    plotOptions: {
      line: {
        dataLabels: {
          // 开启数据标签
          enabled: true,
        },
      },
    },
    series: datay,
    responsive: {
      rules: [
        {
          condition: {
            maxWidth: 500,
          },
          chartOptions: {
            legend: {
              layout: "horizontal",
              align: "center",
              verticalAlign: "bottom",
            },
          },
        },
      ],
    },
  };
});
</script>

<style scoped></style>
